import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ConfigProvider, theme } from 'antd';
import { AnimatePresence } from 'framer-motion';
import Layout from './components/Layout.tsx';
import Dashboard from './pages/Dashboard.tsx';
import SteamSetup from './pages/SteamSetup.tsx';
import FrpSetup from './pages/FrpSetup.tsx';
import ServerControl from './pages/ServerControl.tsx';
import DatabasePage from './pages/Database.tsx';
import SettingsPage from './pages/Settings.tsx';
import './App.css';

const App = () => {
  return (
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
        token: {
          // 主色调：薄荷绿
          colorPrimary: '#10B981',
          colorPrimaryHover: '#34D399',
          colorPrimaryActive: '#059669',
          
          // 背景色
          colorBgContainer: '#1F1F1F',
          colorBgElevated: '#262626',
          colorBgLayout: '#171717',
          
          // 边框色
          colorBorder: '#404040',
          colorBorderSecondary: '#404040',
          
          // 文字色
          colorText: '#FFFFFF',
          colorTextSecondary: '#A3A3A3',
          colorTextTertiary: '#A3A3A3',
          
          // 状态色
          colorSuccess: '#10B981',
          colorError: '#EF4444',
          colorWarning: '#F59E0B',
          colorInfo: '#3B82F6',
          
          // 圆角
          borderRadius: 8,
          
          // 阴影
          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
          boxShadowSecondary: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        },
        components: {
          Card: {
            colorBgContainer: '#1F1F1F',
            colorBorderSecondary: '#404040',
            borderRadiusLG: 12,
          },
          Button: {
            borderRadius: 8,
            controlHeight: 40,
          },
          Menu: {
            colorBgContainer: '#262626',
            colorItemBg: 'transparent',
            colorItemBgSelected: 'rgba(16, 185, 129, 0.2)',
            colorItemTextSelected: '#10B981',
            colorItemTextHover: '#FFFFFF',
            colorItemText: '#A3A3A3',
          },
          Layout: {
            colorBgHeader: '#262626',
            colorBgContainer: '#262626',
          }
        }
      }}
    >
      <Router>
        <div className="app">
          <Layout>
            <AnimatePresence mode="wait">
              <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/steam-setup" element={<SteamSetup />} />
                <Route path="/frp-setup" element={<FrpSetup />} />
                <Route path="/server-control" element={<ServerControl />} />
                <Route path="/database" element={<DatabasePage />} />
                <Route path="/settings" element={<SettingsPage />} />
              </Routes>
            </AnimatePresence>
          </Layout>
        </div>
      </Router>
    </ConfigProvider>
  );
};

export default App; 